<template>
  <div class="personnel-container w-100P h-100P flex-column">
    <div class="flex-row justify-between w-100P   padding-lr-20" style="display:block">
      <query-container @search="getTableData" @reset="handleReset">
      <!-- 查询条件 -->
      <div class="justify-between">
        <el-form ref="resetForm" inline :model="queryInfo" label-position="left" label-width="80px">
          <el-form-item label="企业名称" prop="enterpriseName">
            <el-input v-model="queryInfo.enterpriseName" clearable class="input-width" placeholder="请输入组织名称" />
          </el-form-item>
          <el-form-item label="主要行业" prop="industryName">
            <el-select v-model="queryInfo.industryId" placeholder="请选择对应行业">
              <el-option
                v-for="item in types"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </query-container>
    </div>
    <div class="parting-line"></div>
    <div class="flex-sub padding-lr-20   padding-top-20">
      <el-button size="mini" icon="el-icon-edit" type="primary" plain @click="maintainReport(0)">新增</el-button>
      <el-button size="mini" icon="el-icon-upload" type="primary" plain @click="Template">导出模板</el-button>
      <el-button size="mini" icon="el-icon-folder-add" type="primary" plain @click="Import">导入报告</el-button>
      <el-table
        class="table-container"
        :data="tableData"
        header-cell-class-name="table-header-cell"
        header-row-class-name="table-header-row"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        highlight-current-row
        v-loading="tableDataLoading"
      >
        <el-table-column prop="enterpriseName" label="企业名称" show-overflow-tooltip />
        <el-table-column prop="legalRepresentative" label="法人代表" show-overflow-tooltip />
        <el-table-column prop="classification" label="工商分类" show-overflow-tooltip/>
        <el-table-column prop="industryName" label="主要行业" show-overflow-tooltip/>
        <el-table-column prop="registeredCapital" label="注册资本(万元)" />
        <el-table-column label="注册时间" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.establishDate | dateTimeOnly }}</span>
          </template>
        </el-table-column>
        <el-table-column label="入园时间" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.inputDate | dateTimeOnly }}</span>
          </template>
        </el-table-column>
        <el-table-column label="离园时间" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.outDate  }}</span>
          </template>
        </el-table-column>
        <el-table-column label="在园状态">
          <template slot-scope="scope">
            <span>{{ scope.row.parkState | FilterStatus}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="businessAddress" label="办公地址" show-overflow-tooltip/>
        <!-- <el-table-column prop="account" label="企业管理账户" show-overflow-tooltip />
        <el-table-column prop="password" label="密码" show-overflow-tooltip /> -->
        <el-table-column
          label="操作"
          fixed="right"
          :width="handleScreenWidthToVw(150)+'px'"
          align="center"
        >
        <template slot-scope="scope">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">更多</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item divided @click.native="maintainReport(scope.row.id)">
                修改信息
              </el-dropdown-item>
              <el-dropdown-item divided @click.native="deleteMsg(scope.row.id)">
                删 除
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
  </div>
    <el-pagination
      hide-on-single-page
      background
      layout="total,prev, pager, next, jumper"
      :current-page="page.pageNo"
      :page-size="page.pageSize"
      :total="total"
      class=" pagination"
      @current-change="handleCurrentChange"
      />
    <!-- 新增 修改  -->
    <information ref="mychild" :deviceDialogVisible="deviceDialogVisible" :title="AddTitle" :AddId="AddId"  @close="handleCloseEdit"/>
  </div>
</template>

<script>
import QueryContainer from '@/components/query-container'
import { handleScreenWidthToVw } from '@/utils/tools'
import information from './components/information'
import {ApiGetList,DeleteEnterprise, findIndustryMenu } from './api'

export default {
  components: { QueryContainer, information },
  filters: {
    FilterStatus(val) {
      if(val === 1) {
        return '在园'
      } else {
        return '离园'
      }
    }
  },
  data() {
    return {
      netTypeList:[
        {value:1,label:'在园'},
        {value:0,label:'离园'}
      ],
      queryInfo: {
        queryInfo: '',
        enterpriseName:'',
      },
      addDepdialogVisible: true,
      form: {
        dataStatusEnum: 'NORMAL',
        name: '',
        pid: 0,
        sortNo: 0,
      },
      page: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      types: [],
      option: [],
      tableData: [],
      tableDataLoading:true,
      formInfo: { selDep: null, selChange: false, title: '', pidName: null },
      // 控制新增修改显示
      deviceDialogVisible:false,
      AddTitle:'新增',
      AddId:'',
      statusDialog:false,
    }
  },
  computed: {
    handleScreenWidthToVw() {
      return handleScreenWidthToVw
    },

  },
  created() {
    this.getTableData()
    this.getType()
  },
  mounted() {
  },
  methods: {
    // 获取行业分类
    getType() {
      findIndustryMenu({ id: 0}).then(response => {
        this.types = response
      })
    },
    // 获取  tableData 数据
    getTableData() {
      this.tableDataLoading = true
      ApiGetList({...this.page, enterpriseVo: this.queryInfo}).then(res => {
        this.tableData = res.records
        this.page.pageNo = res.pageNo
        this.page.pageSize = res.pageSize
        this.total = res.total
        this.tableDataLoading = false
      })
    },
    // 重置
    handleReset() {
      this.$refs.resetForm.resetFields()
      this.getTableData()
    },
    // 切换页面 下方分页
    handleCurrentChange(val) {
      this.page.pageNo = val
      this.getTableData()
    },
    Template() {
      console.log('导出模板');
    },
    Import() {
      console.log('导出');
    },
    // 修改 新增
    maintainReport(id) {
      if(!id) {
        this.AddTitle = '新增'
        this.AddId = ''
      } else {
        this.AddTitle = '修改'
         this.AddId = id
        this.$refs.mychild.parentHandleclick(id);
      }
      this.deviceDialogVisible = true
    },
    // 删除
    deleteMsg(id) {
      this.$confirm('此操作将永久删除该条数据 是否继续?', '提示', {
        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
      }).then(() => {
        DeleteEnterprise({enterpriseId:id}).then((res) => { 
          if(res) {
            this.$message({
              message: '删除成功！',
              type: 'success'
            })
            this.getTableData()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })       
      })
    },
    // 关闭弹框
    handleCloseEdit(){
      this.statusDialog = false
      this.deviceDialogVisible = false
    }
    }
}
</script>

<style lang="scss" scoped>
.personnel-container {
  padding:  0;
  box-sizing: border-box;
}

.padding-lr-20 {
  padding: 0 vw(20px);
}

.padding-top-20 {
  padding-top: vh(20px);
}

.search-button-bar {
  height: vh(40px);
  margin-top: vh(2px);
}

.parting-line {
  height: vh(13px);
  background: #f3f4f8;
}

.dialog-input-width {
  width: vw(180px);
  font-size: vw(14px);
}

.btn-edit {
  margin-right: vw(10px);
  color: #0084ee;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}

.btn-delete {
  margin-left: vw(10px);
  color: #d12d1f;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}

::v-deep {
  .el-button {
    font-size: vw(14px);
  }

  .custom-button {
    padding: vw(10px) vw(20px);
    font-size: vw(14px);
    background: #f2f2f2;
  }

  .el-dialog__header {
    height: vh(52px);
    padding: vw(17px) vh(23px) vw(17px);
    // background-color: #f8f8f8;
  }

  .el-dialog__title {
    font-size: vh(18px);
    font-weight: 500;
    color: #333;
  }

  .el-dialog__body {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: vh(20px) 0;
  }

  .el-dialog__footer {
    padding: vh(10px) vw(20px) vh(20px);
    // background: #f0f4f8;
    text-align: center;
  }

  .el-form-item {
    margin-bottom: vh(22px);
  }

  .el-form-item__label {
    font-size: vw(14px);
    line-height: vh(40px);
  }

  .el-form-item__content {
    font-size: vw(14px);
    line-height: vh(40px);
  }

  .input-width {
    width: vw(230px);
    font-size: vw(14px);
  }

  .el-icon--left {
    margin-right: 0;
  }

  .el-radio__label {
    font-size: vh(14px);
  }

  .el-input-number {
    line-height: vh(28px);
  }

  .el-table td, .el-table th {
    padding-left: vw(20px)
  }
  .el-input-number__decrease,
  .el-input-number__increase {
    width: vw(40px);
    height: vh(16px) !important;
    line-height: vh(16px) !important;
  }
}
  ::v-deep  .el-dropdown-link {
    color: #409EFF;
    cursor: pointer;
  }
</style>
